<template>
    <div>
        <Modal v-model="show" title="锁定用戶"
               :mask-closable="false" :closable="true" @on-cancel="cancel(false)">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>锁定确认</span>
            </p>
            <div style="text-align:center">
                <p>确认要锁定 {{userName}} 吗?</p>
            </div>
            <div slot="footer">
                <Button type="warning" size="large" long :loading="loading" @click="del">锁定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';

    export default {
        data() {
            return {
                show: true,
                loading: false
            };
        },
        props: {
            userId: {
                type: String,
                default: ''
            },
            userName: {
                type: String,
                default: ''
            }
        },
        methods: {
            ...mapActions(['freezeSystemUser']),
            cancel(reload = false) {
                this.$emit('cancel', 'freeze', reload);
            },
            del() {
                this.freezeSystemUser({
                    userId: this.userId
                }).then(res => {
                    if (res.code === '0000') {
                        this.$Message.success('用户 ' + this.userName + ' 锁定成功');
                        this.cancel(true);
                        this.loading = false;
                    } else {
                        this.$Message.error(this.$t('freezeDataFailed'));
                        this.loading = false;
                    }
                });
            }
        }
    };
</script>